<template>
  <div class="contact_user_item">
    <a-badge :count="user.unreadCount">
      <a-avatar class="avatar" :size="50" :src="user.avatar"/>
    </a-badge>
    <div class="info">
      <span class="name">{{ user.name }}</span>
      <div class="content">{{ user.content }}</div>
    </div>
    <span class="time">{{ user.createdTime.substr(0, 10) }}</span>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    user: {
      type: Object,
      default () {
        return {
          id: '',
          name: '',
          domain: '',
          avatar: '',
          unreadCount: false,
          content: '',
          createdTime: ''
        }
      }
    }
  }
})
</script>

<style lang="less" scoped>
.contact_user_item {
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;

  & .info {
    width: 85%;
    display: flex;
    flex-direction: column;

    & .name {
      font-size: 16px;
      font-weight: 700;
    }

    & .content {
      width: 100%;
      margin-top: 10px;
      color: #00000080;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

@media screen and (max-width: 1400px) {
  .contact_user_item {
    & .info {
      width: 65%;
    }
  }
}

@media screen and (max-width: 1000px) {
  .contact_user_item {
    & .info {
      width: 50%;
    }
  }
}
</style>
